<template>
  <div class="login">
    <header>
      <van-nav-bar
      title="嗨嗨购登录"
      left-arrow
      @click-left="$router.back()"
      >
      <template #left>
        <van-icon name="arrow-left" size="20" color="black"/>
      </template>
      </van-nav-bar>
    </header>

    <main>
      <van-cell-group border>
        <van-field v-model="tel" label="手机号" placeholder="请输入手机号" autofocus/>
      </van-cell-group>
      <van-cell-group border>
        <van-field v-model="password" :type="flag?'password':'text' " label="密码" placeholder="请输入密码" :right-icon="flag?'closed-eye':'browsing-history-o' " @click-right-icon='flag=!flag' />
      </van-cell-group>

      <div class="register">
        <van-button round type="danger" size="large" @click="Login">登录</van-button>
        <router-link to="/register">点我注册</router-link>
      </div>
    </main>
    
  </div>
</template>

<script>
import Vue from 'vue';
import { Field, Cell, CellGroup, Button,Toast, } from 'vant';

import {doLogin} from '../api/user'
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Toast);

export default {
  data () {
    return {
      tel:'',
      password: '',
      flag: true,
    }
  },
  methods: {
    Login() {
      doLogin({loginname:this.tel,password:this.password}).then(res=>{
        console.log(res);
        switch (res.data.code) {
          case '200':
            Toast.success('登录成功');
            localStorage.setItem('token',res.data.data.token)
            localStorage.setItem('userid',res.data.data.userid)
            break;
          case '10010':
            Toast.fail('该用户不存在');
            break;
          case '10011':
            Toast.fail('密码错误');
            break;
        
          default:
            break;
        }
      })
    }
  }
}
</script>

<style scoped>
.register {
  width: 75%;
  margin: 30px auto;
}
</style>